<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我们的回忆</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="page-transition"></div>
    <nav class="main-nav">
        <a href="home.html" class="nav-link">首页</a>
        <a href="memories.html" class="nav-link active">我们的回忆</a>
        <a href="confession.html" class="nav-link">我的心意</a>
    </nav>

    <div class="memories-container">
        <h1 class="page-title">我们的美好时光</h1>
        
        <div class="timeline">
            <!-- 时间轴项目1 -->
            <div class="timeline-item">
                <div class="timeline-date">第一次相遇</div><br><br>
                <div class="timeline-content">
                    <h3>2020年9月1日</h3>
                    <p>那天阳光正好，你的笑容让我心动...</p>
                    <div class="timeline-photos" data-gallery="first-meet">
                        <img src="D:\phpstudy_pro\WWW\admin\hong\img\zouxin.gif" alt="第一次相遇">
                    </div>
                </div>
            </div>

            <!-- 时间轴项目2 -->
            <div class="timeline-item">
                <div class="timeline-date">第一次约会</div><br><br>
                <div class="timeline-content">
                    <h3>2020年10月15日</h3>
                    <p>记得那家咖啡店，我们聊了整整一个下午...</p>
                    <div class="timeline-photos" data-gallery="first-date">
                        <img src="D:\phpstudy_pro\WWW\admin\hong\img\zhiwo.gif" alt="第一次约会">
                    </div>
                </div>
            </div>

            <!-- 时间轴项目3 -->
            <div class="timeline-item">
                <div class="timeline-date">特别的日子</div><br><br>
                <div class="timeline-content">
                    <h3>2021年2月14日</h3>
                    <p>我们的第一个情人节，你送我的礼物我至今珍藏...</p>
                    <div class="timeline-photos" data-gallery="valentine">
                        <img src="D:\phpstudy_pro\WWW\admin\hong\img\R-C.gif" alt="情人节">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 照片画廊模态框 -->
    <div class="gallery-modal" id="galleryModal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            
            <!-- 相册导航 -->
            <div class="album-nav">
                <div class="album-thumbnails">
                    <div class="album-thumb active" data-album="first-meet">
                        <img src="img/zouxin.gif" alt="第一次相遇">
                        <span>第一次相遇</span>
                    </div>
                    <div class="album-thumb" data-album="first-date">
                        <img src="img/zhiwo.gif" alt="第一次约会">
                        <span>第一次约会</span>
                    </div>
                    <div class="album-thumb" data-album="valentine">
                        <img src="img/R-C.gif" alt="情人节">
                        <span>情人节</span>
                    </div>
                </div>
            </div>

            <!-- 照片幻灯片 -->
            <div class="gallery-viewer">
                <div class="gallery-slides">
                    <!-- 幻灯片内容将通过JavaScript动态加载 -->
                </div>
                <a class="prev">&#10094;</a>
                <a class="next">&#10095;</a>
            </div>
        </div>
    </div>

    <div class="music-control">
        <button id="musicToggle">🎵 播放音乐</button>
    </div>

    <script src="navigation.js"></script>
    <script src="music.js"></script>
    <script src="gallery.js"></script>
</body>
</html>